﻿@namespace IoTSharp.ClientApp.Pages.Account.Center
@page "/account/center"

<GridContent>
    <Row Gutter="24">
        <AntDesign.Col Span="7">
            <Card Style="margin-bottom: 24px;">
                <div class="avatarHolder">
                    <img alt="" src="@_currentUser.Avatar" />
                    <div className="name">@_currentUser.Name</div>
                    <div>@_currentUser.Signature</div>
                </div>

                <div class="detail">
                    <p>
                        <Icon Type="contacts" Theme="outline" Style="margin-right:8px;" />
                        @_currentUser.Title
                    </p>
                    <p>
                        <Icon Type="cluster" Theme="outline" Style="margin-right:8px;" />
                        @_currentUser.Group
                    </p>
                    <p>
                        <Icon Type="home" Theme="outline" Style="margin-right:8px;" />
                        <!--todo: add userinfo-->
                        @_currentUser.Geographic.Province.Label
                        @_currentUser.Geographic.City.Label
                    </p>
                </div>

                <Divider Dashed />

                <div class="tags">
                    <div class="tagsTitle">标签</div>
                    @foreach (var tag in _currentUser.Tags)
                    {
                        <Tag>@tag.Label</Tag>
                    }
                    
                    @if (_inputVisible)
                    {
                        <AntDesign.Input
                            Type="text"
                            Size="small"
                            Style="width: 78px"
                            @bind-Value="InputValue"
                            OnBlur="HandleInputConfirm"/>
                    }
                    else
                    {
                        <Tag OnClick="ShowInput" Style="border-style: dashed">
                            <Icon Type="plus" Theme="outline" />
                        </Tag>
                    }
                </div>

                <Divider Dashed Style="margin-top: 16px;" />
                
                <div class="team">
                    <div class="teamTitle">团队</div>
                    <!--todo: add notice-->
                </div>
            </Card>
        </AntDesign.Col>
        <AntDesign.Col Span="17">
            <Card Class="tabsCard">
                <CardTabs>
                    <Tabs DefaultActiveKey="1">
                        <TabPane Key="1">
                            <Tab>文章 (@_fakeList.Count)</Tab>
                            <ChildContent>
                                <Articles List="_fakeList"/>
                            </ChildContent>
                        </TabPane>
                        <TabPane Key="2">
                            <Tab>应用 (@_fakeList.Count)</Tab>
                            <ChildContent>
                                <Applications List="_fakeList"/>
                            </ChildContent>
                        </TabPane>
                        <TabPane Key="3">
                            <Tab>项目 (@_fakeList.Count)</Tab>
                            <ChildContent>
                                <Projects List="_fakeList"/>
                            </ChildContent>
                        </TabPane>
                    </Tabs>
                </CardTabs>
            </Card>
        </AntDesign.Col>
    </Row>
</GridContent>
